<template>
    <el-row style="height:100%">
        <el-col :span="8">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>组织机构</span>
                    </div>
                </template>
                <el-row :span="1" :gutter="2">
                    <el-button @click="addDepartmentDialogVisible=true">新增部门</el-button>
                    <el-button @click="addSubDepartmentDialogVisible=true">新增子部门</el-button>
                    <el-button @click="delDepartmentDialogVisible=true">删除</el-button>
                    <el-dialog v-model="addDepartmentDialogVisible" title="新增部门" width="30%" destroy-on-close center>
                        <el-form :model="department_item">
                            <el-form-item label="部门名称">
                                <el-input v-model="department_item.name" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="add_department">确定</el-button>
                                <el-button type="primary" @click="addDepartmentDialogVisible=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <el-dialog v-model="addSubDepartmentDialogVisible" title="新增子部门" width="30%" destroy-on-close center>
                        <el-form :model="department_item">
                            <el-form-item label="子部门名称">
                                <el-input v-model="department_item.name" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="add_sub_department">确定</el-button>
                                <el-button type="primary" @click="addSubDepartmentDialogVisible=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <el-dialog v-model="delDepartmentDialogVisible" title="删除" width="30%" destroy-on-close center>
                        <el-form :model="department_item">
                            <el-form-item>
                                <span>确认删除选中行数据？</span>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="delete_department">确定</el-button>
                                <el-button type="primary" @click="delDepartmentDialogVisible=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </el-row>
                <el-row :span="11">
                    <el-tree ref="tree"
                        :data='treeData'
                        show-checkbox
                        default-expand-all
                    />
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>用户信息</span>
                    </div>
                </template>
                <el-row :span="1" :gutter="2">
                    <el-col :span='12' justify="start">
                        <el-button @click="addUserDialogVisible=true">新增</el-button>
                        <el-button @click="editUserDialogVisible=true;user_item=table.getSelectionRows()">编辑</el-button>
                        <el-button @click="delUserDialogVisible=true">删除</el-button>
                        <el-dialog v-model="addUserDialogVisible" title="新增" width="30%" destroy-on-close center>
                            <el-form :model="user_item">
                                <el-form-item label="姓名">
                                    <el-input v-model="user_item.name" />
                                </el-form-item>
                                <el-form-item label="职位">
                                    <el-input v-model="user_item.position" />
                                </el-form-item>
                                <el-form-item label="部门">
                                    <el-select v-model="user_item.unit" style="width:100%">
                                        <el-option v-for="i in departments" :key="i" :value="i"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="角色">
                                    <el-select v-model="user_item.role" style="width:100%">
                                        <el-option v-for="i in roles" :key="i" :value="i"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="电话">
                                    <el-input v-model="user_item.phone" />
                                </el-form-item>
                                <el-form-item label="邮箱">
                                    <el-input v-model="user_item.mail" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="add_user">确定</el-button>
                                    <el-button type="primary" @click="addUserDialogVisible=false">取消</el-button>
                                </el-form-item>                            
                            </el-form>
                        </el-dialog>
                        <el-dialog v-model="editUserDialogVisible" title="编辑" width="30%" destroy-on-close center>
                            <el-form :model="user_item">
                                <el-form-item label="姓名">
                                    <el-input v-model="user_item.name"></el-input>
                                </el-form-item>
                                <el-form-item label="职位">
                                    <el-input v-model="user_item.position"></el-input>
                                </el-form-item>
                                <el-form-item label="部门">
                                    <el-select v-model="user_item.unit" style="width:100%">
                                        <el-option v-for="i in departments" :key="i" :value="i"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="角色">
                                    <el-select v-model="user_item.role" style="width:100%">
                                        <el-option v-for="i in roles" :key="i" :value="i"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="电话">
                                    <el-input v-model="user_item.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱">
                                    <el-input v-model="user_item.mail"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="edit_user">确定</el-button>
                                    <el-button type="primary" @click="editUserDialogVisible=false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                        <el-dialog v-model="delUserDialogVisible" title="删除" width="30%" destroy-on-close center>
                            <el-form :model="user_item">
                                <el-form-item>
                                    <span>确认删除选中行数据？</span>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="delete_user">确定</el-button>
                                    <el-button type="primary" @click="delUserDialogVisible=false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                    </el-col>
                    <el-col :span='12' justify="end">
                        <el-input size="small" placeholder="用户名" v-model="filter.name">
                            <template #append><el-button type="success" style="border-color:var(--el-color-success);background-color:var(--el-color-success);color:#fff">查询</el-button></template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row :span="11">
                    <el-table ref="table" :data="tableData" highlight-current-row border :row-key="tableData.id" style="width: 100%">
                        <el-table-column prop="name" label="姓名" />
                        <el-table-column prop="position" label="职位" />
                        <el-table-column prop="unit" label="部门" />
                        <el-table-column prop="role" label="角色" />
                        <el-table-column prop="phone" label="电话" />
                        <el-table-column prop="mail" label="邮箱" />
                    </el-table>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import {ref} from 'vue'
export default {
    setup(){
        const tree=ref(null)
        const table=ref(null)
        let tableData=ref([{
            id:0,
            name: '张三',
            position:'PL',
            unit: '开发部',
            role:'管理员',
            phone:'11111111',
            mail:'123@163.com'
        }]),treeData=ref([{
            label: '公司一级部门',
            children: [
                {
                    label: '公司二级部门',
                    children: [
                        {
                            label: '公司三级部门',
                        },
                    ],
                },
            ],
        }]),roles=ref([]),departments=ref([]);
        function update_user_data(){
            window.cefQueryRequset('user','query', {}, (res,data)=>{
                if(res && data instanceof Array && data.length) {
                    tableData.value = tableData.value.concat(data)
                }
            })
        }
        update_user_data()
        function update_role_data(){
            window.cefQueryRequset('role','query', {}, (res,data)=>{
                if(res && data instanceof Array && data.length) {
                    roles.value = data.map(o=>o.name)
                }
            })
        }
        update_role_data()
        function update_department_data(){
            window.cefQueryRequset('department','query',{},(res,data)=>{
                if(res && data instanceof Array && data.length) {
                    departments.value = data.map(o=>o.name)
                    data = data.map(o=>{return {label:o.name}})
                    treeData.value = treeData.value.concat(data)
                }
            })
        }
        update_department_data()
        return {table,tree,tableData,treeData,roles,departments,update_user_data,update_role_data,update_department_data}
    },
    data(){
        return {
            addDepartmentDialogVisible:ref(false),
            addSubDepartmentDialogVisible:ref(false),
            delDepartmentDialogVisible:ref(false),
            addUserDialogVisible:ref(false),
            editUserDialogVisible:ref(false),
            delUserDialogVisible:ref(false),
            department_item:{
                name:''
            },
            user_item:{
                name: '',
                position:'',
                address: '',
                role:'',
                phone:'',
                mail:''
            },
            filter:{
                name:''
            },
        }
    },
    methods:{
        add_department(){
            window.cefQueryRequset('department','add',this.department_item)
            this.update_department_data()
            this.addDepartmentDialogVisible =false;
        },
        add_sub_department(){
            window.cefQueryRequset('department','add_sub',this.department_item)
            this.update_department_data()
            this.addSubDepartmentDialogVisible = false;
        },
        delete_department(){
            let item = this.tree.getCurrentNode()
            if(item) {
                window.cefQueryRequset('department','del', this.department_item)
                this.update_department_data()
            }
            this.delDepartmentDialogVisible = false;
        },
        add_user(){
            window.cefQueryRequset('user','add',this.user_item)
            this.update_user_data()
            this.addUserDialogVisible = false;
        },
        edit_user(){
            this.update_role_data()
            window.cefQueryRequset('user','edit',this.user_item)
            this.update_user_data()
            this.editUserDialogVisible = false;
        },
        delete_user(){
            let item = this.table.getSelectionRows()
            debugger
            if(item) {
                window.cefQueryRequset('user','del',this.user_item)
                this.update_user_data()
            }
            this.delUserDialogVisible = false;
        },
        change(val){
            console.log(val)
        }
    }
}
</script>

<style scoped>
.el-card{
    height: 100%;
}
</style>